<template>
  <div id="control-board">
    <el-alert
      :title="
        '登录不同角色 可以查看不同菜单操作列表 当前登录角色为 ' +
        userInfo.role +
        ' , 权限级别为(1-4) : ' +
        userInfo.permission +
        ' ,  管理员账号看这里：校长(管理员) 账号：Lucson 密码： 123456'
      "
      type="error"
      close-text="知道了"
      effect="dark"
    >
    </el-alert>
    <el-row type="flex" class="panel-card" style="padding-top:10px;" :gutter="20">
      <el-col :xs="12" :sm="6">
        <el-skeleton v-if="studentCount.isLoading" :rows="3" animated />
        <div v-else class="panel" style="background-color: #fedd9b">
          <el-row>
            <el-col class="hidden-xs-only" :span="10">
              <i style="background-color: #fdbb38" class="el-icon-s-custom"></i>
            </el-col>
            <el-col :xs="24" :sm="14">
              <h2 class="text" style="height: 50px; line-height: 70px">
                {{ this.studentCount.count }}
              </h2>
              <p class="text">学生数量</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="panel" style="background-color: #d1effe">
          <el-row>
            <el-col class="hidden-xs-only" :span="10">
              <i style="background-color: #19affb" class="el-icon-s-shop"></i>
            </el-col>
            <el-col :xs="24" :sm="14">
              <h2 class="text" style="height: 50px; line-height: 70px">503</h2>
              <p class="text">奖项</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-skeleton v-if="departmentCount.isLoading" :rows="3" animated />
        <div v-else class="panel" style="background-color: #fde1d9">
          <el-row>
            <el-col :sm="10" class="hidden-xs-only">
              <i
                style="background-color: #f46841"
                class="el-icon-s-platform"
              ></i>
            </el-col>
            <el-col :xs="24" :sm="14">
              <h2 class="text" style="height: 50px; line-height: 70px">
                {{ this.departmentCount.count }}
              </h2>
              <p class="text">部门</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-skeleton v-if="orderTotalPrice.isLoading" :rows="3" animated />
        <div class="panel" v-else style="background-color: #e2e1fe">
          <el-row>
            <el-col class="hidden-xs-only" :span="10">
              <i style="background-color: #6e6bfa" class="el-icon-wallet"></i>
            </el-col>
            <el-col :xs="24" :sm="14">
              <h2 class="text" style="height: 50px; line-height: 70px">
                ${{ orderTotalPrice.count }}
              </h2>
              <p class="text">收入</p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <el-row>
            <el-col :sm="16" style="line-height: 40px"> 交易额查询 </el-col>
            <el-col :sm="8">
              <el-select v-model="salary" placeholder="请选择">
                <el-option label="今天" value="nowDay"> </el-option>
                <el-option label="上个星期" value="lastWeek"> </el-option>
                <el-option label="上个月" value="lastMonth"> </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <el-row>
            <el-col :sm="16" style="line-height: 40px"> 学生人数查询 </el-col>
            <el-col :sm="8">
              <el-select v-model="studentNumber" placeholder="请选择">
                <el-option label="今天" value="nowDay"> </el-option>
                <el-option label="上个星期" value="lastWeek"> </el-option>
                <el-option label="上个月" value="lastMonth"> </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>明星学生</span>
          </div>
          <div>
            <el-table
              v-loading="tableData.length <= 0"
              stripe
              size="small"
              :data="tableData"
              style="width: 100%"
              height="250"
            >
              <el-table-column prop="_id" label="ID" width="200">
              </el-table-column>
              <el-table-column prop="studentName" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="studentTotalScore" label="分数">
              </el-table-column>
              <el-table-column prop="percentage" label="百分比">
              </el-table-column>
              <el-table-column prop="year" label="入学年份"> </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :xs="24" class="actively">
        <el-card class="box-card" shadow="hover" >
          <div slot="header" class="clearfix">
            <span>学生活动</span>
          </div>
          <div>
            <el-timeline
              v-loading="activelys.length <= 0"
              v-if="activelys.length > 0"
              :reverse="reverse"
              style="height: 250px; overflow-y: scroll"
            >
              <el-timeline-item
                v-for="(activity, index) in activelys"
                :key="index"
                :color="activity.color"
                :timestamp="activity.timestamp"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
            <p v-else>暂无活动</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { nanoid } from "nanoid";

import { mapState } from "vuex";

import { isMobile } from "@/util/util"

import {
  useGetStudentCount,
  useGetDepartmentCount,
  useGetOrderTotalPrice,
  useGetFindTotalPrice,
  useGetNewAddStudentCount,
  useGetExcellentStudent,
  useGetNewActively
} from "@/hooks/controlBoard";

export default {
  name: "ControlBoard",
  data() {
    return {
      studentCount: {
        isLoading: true,
        count: 0,
      },
      departmentCount: {
        isLoading: true,
        count: 0,
      },
      orderTotalPrice: {
        isLoading: true,
        count: 0,
      },
      salary: "",
      studentNumber: "",
      reverse: false,
      tableData: [],
      activelys: [],
    };
  },
  watch: {
    // 这里的内容都可以写到 hooks 文件夹中 这里就比较随意了 没有写进去
    async salary(cycleType) {
      try {
        const resInfo = await useGetFindTotalPrice(cycleType);

        if (resInfo.code === 201 && resInfo.message === "success") {
          if(isMobile()){
             return alert(resInfo["data"]["tradePrice"][0]["cycleTradePrice"] + " 元")
          }
          this.$alert(
            resInfo["data"]["tradePrice"][0]["cycleTradePrice"] + " 元",
            "交易额",
            {
              confirmButtonText: "确定",
            }
          ).catch(() => {});
        } else {
          this.$alert(resInfo.message, "交易额", {
            confirmButtonText: "确定",
          });
        }
      } catch (error) {
        this.$message.error("网络错误");
      }
    },
    async studentNumber(cycleType) {
      try {
        const resInfo = await useGetNewAddStudentCount(cycleType);
          if(isMobile()){
             return alert(resInfo["data"]["count"] + " 人")
          }
          if (resInfo.code === 201 && resInfo.message === "success") {
            this.$alert(resInfo["data"]["count"] + " 人", "新增学生数", {
              confirmButtonText: "确定",
            }).catch(() => {});
          } else {
            this.$alert(resInfo.message, "新增学生数", {
              confirmButtonText: "确定",
         });
        }
      } catch (error) {
        this.$message.error("网络错误");
      }
    },
  },
  mounted() {
    this.$nextTick(async () => {
      try {
        this.studentCount.count = (await useGetStudentCount()).count;
        this.studentCount.isLoading = false;
        this.departmentCount.count = (await useGetDepartmentCount()).count;
        this.departmentCount.isLoading = false;
        this.orderTotalPrice.count = (
          await useGetOrderTotalPrice()
        ).totalPrice[0].totalPrice;
        this.orderTotalPrice.isLoading = false;
        this.tableData = (await useGetExcellentStudent()).data.count.map(
          (cur) => {
            cur.percentage =
              parseInt((cur.studentTotalScore / 1500) * 100) + "%";
            cur.year = new Date(cur.studentInSchoolDate).getFullYear();
            return cur;
          }
        );
        this.activelys = (await useGetNewActively()).data.activelys.map((cur)=>{
           cur.content = cur.activelyTitle;
           cur.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
           cur.timestamp = new Date(cur.activelyDate).toLocaleDateString()
           return cur;
        })
      } catch (error) {
        this.$message.error("网络错误");
      }
    });
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
};
</script>

<style lang="scss" scoped>
#control-board {
  width: 100%;
  .panel {
    height: 100px;
    border-radius: 30px 0 30px 0;
    i {
      font-size: 40px;
      color: white;
      border-radius: 5px;
      display: block;
      width: 70px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      margin: 15px auto;
    }
  }
  .panel-card {
    flex-wrap: wrap;
    height: auto;
    div {
      margin-bottom: 10px;
    }
  }
}

@media screen and (max-width: 762px) {
  .text {
    text-align: center;
  }
  .actively {
    margin-top: 15px;
  }
}
</style>
